axios.defaults.baseURL = 'http://ajax-api.itheima.net'

const list = document.querySelector('.top')

async function renderlist() {
 const {data : res} = await axios({
    url: '/api/category/top',
    method : 'GET'
 })
  const arr = res.data.map(item => {
  return   axios({
      url :'/api/category/sub?id='+item.id
    })
  })
  const newarr = await Promise.all(arr) 
  let html = newarr.map(({data}) => {
    return `
    <li>
        <a href="javascript:;">${data.data.name}</a>
        <ul class="sub">
          ${data.data.children.map(item => {
           return  `
            <li>
            <a href="javascript:;">
              <span>${item.name}</span>
              <img src="${item.picture}" alt="">
            </a>
          </li>
            `
          }).join('')}
        </ul>
      </li>
    `
  }).join('')
  list.innerHTML = html
}
renderlist()